<template>
	<div class="view">
		<div class="header-view">
			<p>购物车详情</p>
		</div>
		<div class="main-view">
			<table border="1">
				<thead>
					<tr style="background: rgba(255,255,255,0.3)">
						<td>物品名称</td>
						<td>单价</td>
						<td>数量</td>
						<td>总计</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in data.data">
						<td>{{item.name}}</td>
						<td>{{item.price}}</td>
						<td>{{item.number}}</td>
						<td>￥{{item.price * item.number}}</td>
					</tr>
				</tbody>
				
			</table>
		</div>
		<div class="footer-view">
			<div class="right-view">
				<p>共计：{{totalCount}}份，总计：￥{{totalCost}}</p>
				<p>优惠：-￥62.00</p>
				<p>应付金额：<span class="price">￥{{totalCost}}</span></p>
			</div>
		</div>
	</div>
</template>

<script>
import QRCode from 'qrcodejs2' 
	export default {
		props: ['data'],
		computed: {
			totalCount() {
				let data = this.data.data;
				return data.length
			},
			totalCost() {
				let sum = 0;
				let data = this.data.data;
				data.map(item => {
					sum += item.price * item.number;
				})
				return sum.toFixed(2);
			}
		},
		mounted () {  
            // this.qrcode();
        },
        methods: {  
            qrcode () {  
                let qrcode = new QRCode('qrcode', {  
                    width: 150,  
                    height: 150, // 高度  
                    text: this.data.form.alicode // 二维码内容  
                    // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
                    // background: '#f0f'  
                    // foreground: '#ff0'  
                })  
                console.log(qrcode)
            }  
        },  
	}
</script>

<style scoped lang="less">
	.view {
		color: #fff;
		width: 12rem;
		overflow: auto;
		margin: 0 auto;
		border-radius: .08rem;
		background: rgba(255, 255, 255, 0.1);
		.header-view {
			padding: .1rem 0;
			text-indent: .2rem;
			background: rgba(255, 255, 255, 0.3);
			border-radius: .08rem .08rem 0 0;
			p {
				font-size: .16rem;
			}
		}
		.main-view {
			height: 7rem;
			overflow: auto;
			table {
				width: 8rem;
				margin: 0 auto;
				margin-top: .4rem;
				border: 1px solid #D5CED2;
				tr {
					height: .4rem;
				}
				td {
					text-indent: .1rem;
				}
			}
		}
		.footer-view {
			width: 7rem;
			margin: .4rem auto;
			text-align: right;
			.left-view {
				float: left;
			}
			.right-view {
				p {
					height: .4rem;
				}
				.price {
					font-size: 24px;
					color: #CD2A86;
				}
			}
		}
	}
</style>